<!DOCTYPE html>  
<html>  
<head>  
    <title>国家自然科学基金项目结题报告下载器</title>  
    <style>  
        .content {
            background-color: #afe1f6;
        }
        .myTitle { 
            margin-top: 100px;
            font-size: 56px;  
            color: #333;  
            text-align: center;   
            font-family: Arial, sans-serif;  
            font-weight: bold;  
            color: #000000;  
        }
        .myButton {
            margin: 0 auto;
            margin-bottom: 30px;
            width: 300px;
            height: 50px;
            font-size: 24px;
            font-weight: bold;
            color: #000000;
            background-color: #4cead8;
            border-color: #333333;
            border-radius: 8px;
            border-width: 2px;
            border-style: solid;
            cursor: pointer;
        }
        .myDiv {  
            width: 800px;  
            margin: 0 auto;  
            text-align: left;  
            border: 1px solid black;
        }
        .myInput {  
            margin-bottom: 30px;
            width: 400px;
            height: 50px;;
            border: 1px solid black;
            border-radius: 8px;
            border-width: 2px;
        }  
        .bottomInfo {
            margin: 0 auto;  
            width: 800px;
            background-color: #AAA;  
            color: #333;  
            padding: 30px;  
            margin-top: 10px;
            margin-bottom: 10px;
        }
        /* 模态窗口样式 */  
        .modal {  
        display: none;  
        position: fixed;  
        z-index: 1;  
        left: 0;  
        top: 0;  
        width: 100%;  
        height: 100%;  
        overflow: auto;  
        background-color: rgba(0, 0, 0, 0.5);  
        }  
        .modal-content {  
        background-color: #fff;  
        margin: 15% auto;  
        padding: 20px;  
        border: 1px solid #ccc;  
        width: 50%;  
        }  
        .modal-close {  
        color: #aaa;  
        float: right;  
        font-size: 28px;  
        font-weight: bold;  
        }  
        .modal-close:hover,  
        .modal-close:focus {  
        color: black;  
        text-decoration: none;  
        cursor: pointer;  
        }  
    </style>
</head>  
<body class="content" onload="openModal()">  
    <h1 class="myTitle" align="center">国家自然科学基金项目结题报告下载器</h1>
    <h4 align="center">powerd by NavSpace.tech</h4>

    <form align="center">
        <button class="myButton" onclick="openModal()">查看使用说明和协议</button>  
    </form>
    <div id="myModal" class="modal">  
        <div class="modal-content">  
        <span class="modal-close" onclick="closeModal()">&times;</span>  
        <h2 align="center">使用说明：</h2>  
        <p>
            1 - 输入关键字搜索项目信息<br>
            2 - 复制项目ID，粘贴到reportID框中进行下载
        </p>
        <h2 align="center">使用协议：</h2>  
        <p>欢迎您来到我们的学习交流网站！在使用本网站之前，请您仔细阅读以下使用协议：</p>  
        <h3>使用目的</h3>  
        <p>本网站仅用于学习交流目的，用户不得将本网站用于任何商业用途或其他非法用途。</p>  
        <h3>用户行为</h3>  
        <p>用户在使用本网站时应遵守法律法规和道德准则，不得发布或传播任何违法、淫秽、暴力、侵权或其他不适当的内容。用户应对自己的行为负责，并承担由此产生的法律后果。</p>  
        <h3>免责声明</h3>  
        <p>本网站不保证所提供的信息和服务的准确性、完整性、可靠性或适用性。本网站不承担由于用户使用本网站而引起的任何损失或损害的责任。</p>  
        <h3>终止使用</h3>  
        <p>本网站有权在任何时候终止用户的使用权限，收回本网站的使用权，并销毁用户在本网站上的所有数据和资料。终止使用的原因包括但不限于违反本协议、违反法律法规等。</p>  
        <h3>其他</h3>  
        <p>使用此网站即表示用户接收此协议。本协议的解释权归本网站所有。</p> 
        </div>  
    </div>  

    <form align="center" id="calculator-form">  
        <input class="myInput" type="text" id="expression" name="expression" placeholder="请输入关键字" width="800">  
        <button class="myButton" style="width: 100px;" type="submit">搜索</button>  
    </form>

    <form align="center" id="reportid-form">  
        <input class="myInput" type="text" id="reportid" name="report_download" placeholder="请输入reportID" width="800">  
        <button class="myButton" style="width: 100px;" type="submit">下载
        </button>  
    </form> 

    <br>
    <div class="myDiv" align="center" id="result"></div>

    <div class="bottomInfo">
        powerd by <a href="http://www.navspace.tech/blog/41" target="_blank"> NavSpace.tech </a> <br>
        联系方式： yangxiaokang495@163.com <br>
        开源项目： <a href="https://gitee.com/tmrnic/gzrreport-downloader" target="_blank"> GZRDownloader-Gitee </a>
    </div>
  
    <script>  
        document.getElementById('calculator-form').addEventListener('submit', function(event) {  
            event.preventDefault();  
            var expression = document.getElementById('expression').value;

            if (!expression || expression.trim() === "") {  
                document.getElementById('result').innerHTML = '注意：输入不能为空';
            } else {  
                document.getElementById('result').innerHTML = '正在检索，请稍等……';
                fetch('/calculate', {  
                    method: 'POST',  
                    body: JSON.stringify({expression: expression}),  
                    headers: {'Content-Type': 'application/json'}  
                })  
                .then(function(response) {  
                    return response.json();  
                })  
                .then(function(data) {  
                    if ('result' in data) {  
                        document.getElementById('result').innerHTML = '搜索结果：<br>' + data.result;  
                    } else if ('error' in data) {  
                        document.getElementById('result').innerHTML = '计算出错：<br>' + data.error;  
                    }  
                });  
            }
        });  

        // 打开模态窗口函数  
        function openModal() {  
        document.getElementById("myModal").style.display = "block";  
        }  
        // 关闭模态窗口函数  
        function closeModal() {  
        document.getElementById("myModal").style.display = "none";  
        }  
    </script>  
</body>  
</html>